<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" placeholder="请输入姓名">
  <script>
    // 1. 获取DOM对象
    const inp = document.querySelector('input')
    // 2. 注册事件
    inp.addEventListener('focus', function () {
      // console.log('输入框获取焦点')
      // this.style.width = '300px'
      // this.style.height = '60px'
      // this.style.fontSize = '30px'
    })
    inp.addEventListener('blur', function () {
      // console.log('输入框失去焦点')
      // this.style.width = '100px'
      // this.style.height = '20px'
      // this.style.fontSize = '16px'
    })

    inp.addEventListener('keyup', function (e) {
      if (e.keyCode === 13) {
        console.log('用户按下了回车键')
      }
    })

    inp.addEventListener('input', function (e) {
      // console.log(this.value)
      console.log(e.target.value)
    })
  </script>
</body>

</html>